<template>
	<div class="padding-20 costomer-container">
		<el-row :gutter="20" class="cell-group">
			<el-col :span="20" v-for="(page, index) in pages" :key="index">
				<aiText class="cell-group-card" :card="page"></aiText>
			</el-col>

			<el-col :span="20" v-for="(page, index) in pages2" :key="index">
				<aiEchart class="cell-group-card" :card="page"></aiEchart>
			</el-col>
		</el-row>
		<aiTable :tableData="tableData" :total="total" :size="selectParams.size" @reloadList="loadList"
			@manualStrategySearchChange = "msSearchChange"
			@remarkComfirm="remarkComfirm" @selectionChange="selectionChange"
			@handlerPageSeleChange="handlerPageSeleChange" @handlerSizeChange="handlerSizeSeleChange" />
	</div>
</template>
<script lang="ts" name="work-customer" setup>
import { reactive, ref, onMounted } from 'vue'
import aiText from "/@/components/card/aiText.vue";
import aiEchart from "/@/components/card/aiEchart.vue"
import aiTable from '/$/customer/components/card/aiTable.vue';
import { service } from '/@/cool';
import { config } from "/@/utils/global";

let pages = reactive([{
	imgUrl: '/images/001.png',
	textTop: '上日引流潜客数',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#4E68B7'
}, {
	imgUrl: '/images/002.png',
	textTop: '原始数据',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#91CC75'
}, {
	imgUrl: '/images/003.png',
	textTop: '过期数据',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#FAC858'
}])
let pages2 = reactive([{
	imgUrl: '/images/icon01.png',
	textTop: '潜客数量趋势图',
	textMid: '',
	textTip: '',
	data: [],
	type: 1
}, {
	imgUrl: '/images/icon01.png',
	textTop: '潜客占比',
	textMid: '',
	textTip: '',
	data: [],
	type: 2
}])

const getChart = async () => {
	await service.lead.info.getChart({}).then(res => {
		pages[0].textMid = res.leadCount;
		pages[0].textTip = res.addRate;
		pages[0].textContent = '较昨日增长';
		pages[1].textMid = res.count;
		pages[1].textTip = res.rate;
		pages[1].textContent = '较昨日增长';
		pages[2].textMid = res.oldCount;
		pages[2].textTip = res.oldRate;
		pages[2].textContent = '较昨日增长';
		pages2[0].data = res.leadList;
		pages2[1].data = res.leadPin;
		pages2[1].textTip = res.leadRate;
	})
}

let tableData = ref<any[]>([]);
let total = ref(0);
let size = ref(0);
function loadList() {
	tableData.value = [];
	getSeleData(1)
}
const selectParams=reactive({
	page: 1,
	size: config.PAGE_SIZE,
	COOL_PAGE_OP: "ENTITY_WITH_RELATIONS",
	keyWord:"",//关注品牌
	strategyCompliance:"",//符合策略
	leadLevel:"",//潜客等级
})
const getSeleData = async (page: number) => {
	selectParams.page = page;
	let selects = await service.lead.info.page(selectParams);
	tableData.value = selects.list;
	total.value = selects.pagination.total;
	size.value = selects.pagination.size;

}
const msSearchChange = (form:any) => {
	Object.assign(selectParams,form)
	getSeleData(1)
}
onMounted(() => {
	getSeleData(1);
	getChart();
})
const remarkComfirm = (value:any) => {
	console.log(value);
}
const selectionChange = (value:any) => {
	console.log(value, "sf");
}
const handlerPageSeleChange = (val:number) => {
	getSeleData(val)
}
const handlerSizeSeleChange = (val:number) => {
	selectParams.size = val;
	getSeleData(1)
}
</script>
<style lang="scss" scoped>
.costomer-container{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
